<template>
  <div class="inline-flex flex-s w-[100%]" :style="{ height }">
    <template v-if="type === 'folder'">
      <img :src="getImageByFullPath(`image-icon/folder-sm.png`)" />
    </template>
    <template v-else-if="isImage(filename) && src">
      <a-image :fallback="fallback" :preview="false" :src="src" :width="parseInt(width)" />
    </template>
    <template v-else-if="isVideo(filename)">
      <img :draggable="false" :src="getImageByFullPath('file/file-video.png')" />
    </template>
    <template v-else-if="isExcel(filename)">
      <img :draggable="false" :src="getImageByFullPath('file/file-excel.png')" />
    </template>
    <template v-else-if="isWordDocument(filename)">
      <img :draggable="false" :src="getImageByFullPath('file/file-wps.png')" />
    </template>
    <template v-else-if="isVideo(filename)">
      <img :draggable="false" :src="getImageByFullPath('file/file-music.png')" />
    </template>

    <!--
      直接根据文件名判断
      这些文件名和文件类有直接型对应关系
     -->
    <template v-else-if="fileList.includes(getFileExtension(filename))">
      <template v-for="(m, n) in fileList" :key="n">
        <img
          :draggable="false"
          v-if="getFileExtension(filename) === m"
          :src="getImageByFullPath(`file/file-${m}.png`)"
        />
      </template>
    </template>

    <img v-else class="h-[100%]" :src="getImageByFullPath(`image-icon/blank-file.png`)" />
  </div>
</template>

<script setup lang="ts">
interface SystemFile {
  /* 文件类型 */
  type?: 'folder' | 'file';
  /* 图片地址 */
  src?: string;
  /* 容器宽高 */
  width?: string;
  height?: string;
  /* 图片加载失败后的默认图 */
  fallback?: string;
  /* 根据文件名判断文件类型 */
  filename: string;
}
import { getImageByFullPath } from '@/api/utils/image';
import failurePng from '@/assets/failure.png';
import { getFileExtension } from '@/utils/file/file';
import { isExcel, isImage, isVideo, isWordDocument } from '@/utils/file/is.file';

const fileList = [
  'js',
  'html',
  'ppt',
  'txt',
  'zip',
  'rar',
  'exe',
  'wps',
  'ts',
  'svg',
  'java',
  'py',
  'c',
  'cpp',
  'php',
  'vue',
  'json',
  'xml',
  'md',
];
const props = withDefaults(defineProps<SystemFile>(), {
  type: 'file',
  width: '64px',
  height: '64px',
  fallback: failurePng,
});
</script>

<style lang="scss" scoped>
img {
  padding: 0;
  height: 100%;
  object-fit: contain;
}
</style>
